/*
 * @Autor: dingxiaolin
 * @Date: 2020-05-10 18:48:05
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2020-05-30 22:20:23
 */

import React, { Component } from "react";
import { Form, Icon, Input, Button, Checkbox, Card } from "antd";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import { login } from "@/actions/user";
import $ from "jquery";
// import less from 'less';
import "./login.less";
import { default as Register } from "../Register";
@connect(
  (state) => ({
    isLogin: state.user.isLogin,
    isLoading: state.user.isLoading,
  }),
  { login }
)
@Form.create()
//experimentalDecorators
class Login extends Component {
  componentDidMount() {
    console.log("$", $(".qf-login-wrapper").text());
    console.log("props", this.props);
    // less.modifyVars({
    //   "@primary-color": "blue",
    // });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.login(values);
      }
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    return this.props.isLogin ? (
      <Redirect to="/admin" />
    ) : (
      <div id="container">
        <Card title="REACT ADMIN 登录" className="qf-login-wrapper">
          <Form onSubmit={this.handleSubmit} className="login-form">
            <Form.Item>
              {getFieldDecorator("username", {
                rules: [{ required: true, message: "用户名必须" }],
              })(
                <Input
                  disabled={this.props.isLoading}
                  prefix={
                    <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                  }
                  placeholder="用户名"
                />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator("password", {
                rules: [{ required: true, message: "密码必须" }],
              })(
                <Input
                  disabled={this.props.isLoading}
                  prefix={
                    <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                  }
                  type="password"
                  placeholder="密码"
                />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator("remember", {
                valuePropName: "checked",
                initialValue: true,
              })(<Checkbox disabled={this.props.isLoading}>记住我</Checkbox>)}
              <Button
                loading={this.props.isLoading}
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                登录
              </Button>
            </Form.Item>
          </Form>
          <Register />
        </Card>
      </div>
    );
  }
}

export default Login;
